<template>
	<qh-page-view title="商品评价">
		<view class="comment-box flex-column-100">
			<view v-if="commentInfo.length>0">
				<block v-for="(item, index) in commentInfo" :key="index">
					<view class="Comment-detail">
						<view class="userInfo">
							<image :src="item.avatar" mode="aspectFit" class="userImage"></image>
							<text class="nickName">{{item.nickname}}</text>
							<view class="goodsStyle size">{{item.sku_name}}</view>
							<view class="time size">{{item.create_time}}</view>
						</view>
						<view class="Comment-con">
							<text class="Comment-con-words">{{item.content?item.content:''}}</text>
							<view class="Comment-con-img" v-if="item.evaluate_img.length > 0">
								<image v-for="(subItem, i) in item.evaluate_img" :key="i" :src="subItem" mode="scaleToFill" @tap.stop="scaleBig(index, i)"></image>
							</view>
						</view>
					</view>
				</block>
			</view>

			<view class="loading">
				<block v-if="!showLoading && canLoad">
					<text>下拉加载更多</text>
				</block>
			</view>
			<view v-if="!canLoad && !showLoading && (!commentInfo||!commentInfo.length)" class="qh-empty-data-box flex-cn-cn">
				<qh-empty-data text="该商品暂无评价"></qh-empty-data>
			</view>
			<view class="kong" v-if="commentInfo&&commentInfo.length&&!canLoad&&!showLoading">已经到底啦</view>
		</view>

	</qh-page-view>
</template>

<script>
	export default {
		data() {
			return {
				goods_id: 0,
				commentInfo: [],
				createTime: [],
				img: [],
				page: 1,
				canLoad: true,
				showLoading: false,
				type: 2, //1商户  2门店
			};
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type;
			}
			this.goods_id = options.goods_id;
			this.getGoodsEvaluateList();
		},

		onReachBottom() {
			this.page = this.page + 1;
			this.getGoodsEvaluateList();
		},
		methods: {
			async getGoodsEvaluateList() {
				if (!this.canLoad || this.showLoading) return;
				this.showLoading = true;

				const res = await this.$request('SmallProgramApi/OrderEvaluate/' + (this.type == 1 ? 'getMerchantGoodsEvaluate' : 'getGoodsEvaluateList'), {
					goods_id: this.goods_id,
					page: this.page,
					pageSize: 10,
					limit: 10,
				})
				if (res.status != 1) return;
				let data = this.type == 1 ? res.data.list : res.data;
				if (this.page != 1) {
					//第一页
					this.commentInfo.push.apply(this.commentInfo, data);
				} else {
					this.commentInfo = data;
				}

				this.canLoad = data.length < 10 ? false : true;
				this.showLoading = false;

				let image = [];
				for (let i = 0; i < this.commentInfo.length; i++) {
					image = image.concat(this.commentInfo[i].evaluate_img);
				}

				this.img = image;
			},
			//查看大图
			scaleBig(index, i) {
				uni.previewImage({
					current: this.commentInfo[index].evaluate_img[i],
					urls: this.img // 需要预览的图片http链接列表

				});
			}
		}
	};
</script>
<style>
	@import "./comment.css";
</style>
